<!--  -->
<template>
  <div class="app">
    <div class="topTool">
      <div class="container">
        <div class="msg">
          <img src="@/assets/img/msg.png" alt="" @click="goto('/member/messages')"/>
        </div>
        <div class="setting">
          <img src="@/assets/img/setting.png" alt="" @click="goto('/member/setting')"/>
        </div>
      </div>
    </div>

    <!-- <div v-if="token.key == 'h5-token'" class="user" @click="goto('/login')"> -->
    <div class="user" @click.stop="goto('/member/userInfo')">
      <div class="container">
        <div class="head_icon">
          <img :src="token ? user_icon : require('@/assets/img/default-icon.png')" alt="" />
        </div>

        <div class="user_name" v-text="token ? user_name : '请登录'"></div>

        <div class="user">
          <img src="@/assets/img/next.png" alt=""  />
        </div>
      </div>
    </div>

    <div class="vip">
      <img src="@/assets/img/vip.png" alt="" @click="goto('/role')"/>
    </div>

    <div class="tool_tit">
      <div class="container">
        <div>我的账号</div>
      </div>
    </div>


    <div class="tool_list">
        <div class="container">
          <div class="list_item" @click="goto('/member/order')">
            <img src="@/assets/img/dindan-icon.png" alt="">
            <span>我的订单</span>
          </div>

          <div class="list_item" @click="goto('/member/promocode')">
            <img src="@/assets/img/yaoqing-icon.png" alt="">
            <span>我的邀请</span>
          </div>
          
        </div>
    </div>
    <bg-img></bg-img>
    <tab-bar :prop="'myInfo'"></tab-bar>
  </div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';
import tabBar from "@/components/tabBar";
import bgImg from "@/components/bgImg";
export default {
  name: "myInfo",
  //import引入的组件需要注入到对象中才能使用
  components: {
    tabBar,
    bgImg,
  },
  data() {
    //这里存放数据
    return {
      token: localStorage.getItem("h5-token"),
      user_name: "",
      user_icon: "",
    };
  },
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {
    goto: function (path) {
      if (path == "/member/userInfo") {
        if (!this.token) {
          path = '/login'
        }
      }
        this.$router.push({
          path,
        });
    },
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  async created() {
    if (this.token) {
    await  this.$axios.get("http://1.14.239.98/api/v2/member/detail").then((res) => {
        // console.log(res);
        this.user_name = res.data.nick_name;
        this.user_icon = res.data.avatar;
      });
    }
  },
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
  beforeCreate() {}, //生命周期 - 创建之前
  beforeMount() {}, //生命周期 - 挂载之前
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style scoped lang="less">
.app {
  height: 100%;
  background-color: #f3f6f9;
  div.topTool {
    background-color: white;
    width: 100%;
    height: 1.32rem;
    div.container {
      width: 6.9rem;
      height: 1.32rem;
      display: flex;
      justify-content: space-between;
      align-items: center;
      div.msg {
        width: 0.52rem;
        height: 0.52rem;
        img {
          width: 0.52rem;
          height: 0.52rem;
        }
      }

      div.setting {
        width: 0.52rem;
        height: 0.52rem;
        img {
          width: 0.52rem;
          height: 0.52rem;
        }
      }
    }
  }

  div.user {
    background-color: white;
    width: 100%;
    height: 1.88rem;
    padding-top: 0.1rem;
    div.container {
      width: 6.9rem;
      height: 1.78rem;
      display: flex;
      justify-content: start;
      //   align-items: center;
      div.head_icon {
        width: 1.28rem;
        height: 1.28rem;
        margin-right: 0.3rem;
        border-radius: 50%;
        img {
          width: 1.28rem;
          height: 1.28rem;
          border-radius: 50%;
        }
      }

      div.user_name {
        width: 5.08rem;
        height: 1.28rem;
        line-height: 1.28rem;
        font-size: 0.32rem;
        text-align: start;
      }

      div.user {
        height: 1.28rem;
        width: 0.24rem;
        img {
          width: 0.24rem;
          margin-top: calc((1.28rem - 0.48rem) / 2);
        }
      }
    }
  }

  div.vip {
    width: 100%;
    background-color: #fff;
    img {
      width: 100%;
      height: 1.3rem;
    }
  }

  div.tool_tit {
    background-color: #fff;
    width: 100%;
    height: 0.8rem;
    padding-top: 0.6rem;
    box-sizing: content-box;
    div.container {
      width: 6.9rem;
      height: 0.8rem;
      div {
        font-size: 0.3rem;
        color: #333;
        text-align: start;
        font-weight: bold;
        height: 0.3rem;
        line-height: 0.3rem;
      }
    }
  }

  div.tool_list {
    background-color: white;
    width: 100%;
    height: 1.12rem;
    padding: .3rem 0;
    box-sizing: content-box;
  div.container {
    width: 6.9rem;
    height: 1.12rem;
    // padding:0 5px; 
    // margin: 0 auto;
    display: flex;

    div.list_item {
      height: 1.12rem;
      width: 1.275rem;
      margin:  0 0.2rem;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      align-items: center;
      img {
        width: .6rem;
        height: .6rem;
      }

      // span {

      // }
    }
  }
}
}
</style>
